<template>
  <div class="creator-list">
    <!-- 列表头部 -->
    <div class="creator-list__header">
      <div class="creator-list__info">
        <span class="creator-list__total">共 {{ total }} 位创作者</span>
      </div>
      
      <div v-if="!mobile" class="creator-list__controls">
        <!-- 视图模式切换 -->
        <n-button-group>
          <n-button
            :type="viewMode === 'grid' ? 'primary' : 'default'"
            size="small"
            @click="handleViewModeChange('grid')"
          >
            <template #icon>
              <n-icon><GridOutline /></n-icon>
            </template>
            网格
          </n-button>
          <n-button
            :type="viewMode === 'list' ? 'primary' : 'default'"
            size="small"
            @click="handleViewModeChange('list')"
          >
            <template #icon>
              <n-icon><ListOutline /></n-icon>
            </template>
            列表
          </n-button>
        </n-button-group>
      </div>
    </div>

    <!-- 加载状态 -->
    <div v-if="loading" class="creator-list__loading">
      <n-spin size="large">
        <template #description>
          正在加载创作者数据...
        </template>
      </n-spin>
    </div>

    <!-- 创作者列表内容 -->
    <div v-else-if="creators.length > 0" class="creator-list__content">
      <!-- 网格视图 -->
      <div 
        v-if="viewMode === 'grid'" 
        class="creator-list__grid"
        :class="{ 'creator-list__grid--mobile': mobile }"
      >
        <creator-card
          v-for="creator in creators"
          :key="creator.id"
          :creator="creator"
          :mobile="mobile"
          @click="handleCreatorClick"
          @view-detail="handleCreatorClick"
        />
      </div>

      <!-- 列表视图 -->
      <div v-else class="creator-list__table">
        <n-data-table
          :columns="tableColumns"
          :data="creators"
          :pagination="false"
          :bordered="false"
          :single-line="false"
          size="medium"
          @row-click="handleRowClick"
        />
      </div>
    </div>

    <!-- 空状态 -->
    <div v-else class="creator-list__empty">
      <n-empty description="暂无创作者数据">
        <template #icon>
          <n-icon :size="48" :depth="3">
            <PeopleOutline />
          </n-icon>
        </template>
        <template #extra>
          <n-button size="small" @click="handleRefresh">
            刷新数据
          </n-button>
        </template>
      </n-empty>
    </div>

    <!-- 分页 -->
    <div v-if="!loading && creators.length > 0" class="creator-list__pagination">
      <n-pagination
        v-model:page="currentPageModel"
        :page-count="Math.ceil(total / pageSize)"
        :page-size="pageSize"
        :show-size-picker="!mobile"
        :page-sizes="[12, 24, 48, 96]"
        :show-quick-jumper="!mobile"
        @update:page="handlePageChange"
        @update:page-size="handlePageSizeChange"
      >
        <template #prefix="{ itemCount }">
          共 {{ itemCount }} 项
        </template>
      </n-pagination>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, h } from 'vue'
import { NTag, NAvatar, NButton, DataTableColumns } from 'naive-ui'
import { 
  GridOutline, 
  ListOutline, 
  PeopleOutline,
  EyeOutline
} from '@vicons/ionicons5'
import type { CreatorDetail as CreatorDetailType, CreatorViewMode } from '@/types/creators'
import { CREATOR_TYPES, CREATOR_STATUS } from '@/api/creators'
import CreatorCard from './CreatorCard.vue'

interface Props {
  creators: CreatorDetailType[]
  loading: boolean
  total: number
  currentPage: number
  pageSize: number
  viewMode: CreatorViewMode
  mobile?: boolean
}

interface Emits {
  (e: 'page-change', page: number): void
  (e: 'page-size-change', pageSize: number): void
  (e: 'view-mode-change', mode: CreatorViewMode): void
  (e: 'creator-click', creatorId: number): void
  (e: 'refresh'): void
}

const props = withDefaults(defineProps<Props>(), {
  mobile: false
})

const emit = defineEmits<Emits>()

// 当前页码的双向绑定
const currentPageModel = computed({
  get: () => props.currentPage,
  set: (value) => emit('page-change', value)
})

// 表格列定义
const tableColumns: DataTableColumns<CreatorDetailType> = [
  {
    title: '创作者',
    key: 'creator',
    width: 200,
    render: (row) => h('div', { class: 'creator-table-cell' }, [
      h(NAvatar, {
        size: 40,
        src: row.avatar,
        round: true,
        style: { marginRight: '12px' }
      }, { default: () => row.nickname.charAt(0) }),
      h('div', { class: 'creator-info' }, [
        h('div', { class: 'creator-name' }, row.nickname),
        h('div', { class: 'creator-category' }, row.category || '未分类')
      ])
    ])
  },
  {
    title: '类型',
    key: 'creator_type',
    width: 100,
    render: (row) => h(NTag, {
      type: getCreatorTypeTagType(row.creator_type),
      size: 'small',
      round: true
    }, { default: () => getCreatorTypeText(row.creator_type) })
  },
  {
    title: '状态',
    key: 'status',
    width: 80,
    render: (row) => h(NTag, {
      type: getStatusTagType(row.status),
      size: 'small',
      round: true
    }, { default: () => getStatusText(row.status) })
  },
  {
    title: '粉丝数',
    key: 'followers',
    width: 100,
    render: (row) => formatNumber(row.followers)
  },
  {
    title: '平台',
    key: 'platform',
    width: 100,
    render: (row) => row.platform || '未知'
  },
  {
    title: '操作',
    key: 'actions',
    width: 100,
    render: (row) => h(NButton, {
      size: 'small',
      type: 'primary',
      ghost: true,
      onClick: () => handleCreatorClick(row.id)
    }, {
      default: () => '查看',
      icon: () => h(EyeOutline)
    })
  }
]

// 获取创作者类型文本
const getCreatorTypeText = (type: number) => {
  return CREATOR_TYPES[type as keyof typeof CREATOR_TYPES]?.label || '未知'
}

// 获取创作者类型标签类型
const getCreatorTypeTagType = (type: number) => {
  switch (type) {
    case 1: return 'error'
    case 2: return 'info'
    case 3: return 'success'
    default: return 'default'
  }
}

// 获取状态文本
const getStatusText = (status: number) => {
  return CREATOR_STATUS[status as keyof typeof CREATOR_STATUS]?.label || '未知'
}

// 获取状态标签类型
const getStatusTagType = (status: number) => {
  switch (status) {
    case 1: return 'success'
    case 2: return 'warning'
    case 3: return 'error'
    default: return 'default'
  }
}

// 格式化数字
const formatNumber = (num: number) => {
  if (num >= 10000) {
    return (num / 10000).toFixed(1) + 'w'
  } else if (num >= 1000) {
    return (num / 1000).toFixed(1) + 'k'
  }
  return num.toString()
}

// 处理视图模式变化
const handleViewModeChange = (mode: CreatorViewMode) => {
  emit('view-mode-change', mode)
}

// 处理分页变化
const handlePageChange = (page: number) => {
  emit('page-change', page)
}

// 处理页面大小变化
const handlePageSizeChange = (pageSize: number) => {
  emit('page-size-change', pageSize)
}

// 处理创作者点击
const handleCreatorClick = (creatorId: number) => {
  emit('creator-click', creatorId)
}

// 处理表格行点击
const handleRowClick = (row: CreatorDetailType) => {
  handleCreatorClick(row.id)
}

// 处理刷新
const handleRefresh = () => {
  emit('refresh')
}
</script>

<style scoped>
.creator-list {
  width: 100%;
}

.creator-list__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 0 4px;
}

.creator-list__info {
  display: flex;
  align-items: center;
  gap: 16px;
}

.creator-list__total {
  font-size: 14px;
  color: var(--n-text-color-2);
}

.creator-list__controls {
  display: flex;
  align-items: center;
  gap: 12px;
}

.creator-list__loading {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 400px;
}

.creator-list__content {
  margin-bottom: 24px;
}

.creator-list__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

.creator-list__grid--mobile {
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}

.creator-list__table {
  background: var(--n-card-color);
  border-radius: 8px;
  overflow: hidden;
}

.creator-list__empty {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 400px;
}

.creator-list__pagination {
  display: flex;
  justify-content: center;
  padding: 20px 0;
}

/* 表格自定义样式 */
:deep(.creator-table-cell) {
  display: flex;
  align-items: center;
}

:deep(.creator-info) {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

:deep(.creator-name) {
  font-weight: 500;
  color: var(--n-text-color);
}

:deep(.creator-category) {
  font-size: 12px;
  color: var(--n-text-color-2);
}

/* 移动端适配 */
@media (max-width: 768px) {
  .creator-list__header {
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
  }

  .creator-list__controls {
    justify-content: center;
  }

  .creator-list__grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .creator-list__pagination {
    padding: 16px 0;
  }
}

@media (max-width: 480px) {
  .creator-list__grid {
    grid-template-columns: 1fr;
  }
}
</style>
